import React, { Component } from 'react';
import './TodoList.css'
import { Input, Button, List } from 'antd'

// import store from './store/thunk'
import store from './store/raga'


import { CHANGE_INPUT, ADD_ITEM, DEL_ITEM } from './store/actionTypes'
// import { changeInputAction, addItemAction, delItemAction, getListAction, getTodoList, getMyListAction } from './store/thunk/actionCreates'
import { changeInputAction, addItemAction, delItemAction, getListAction, getTodoList, getMyListAction } from './store/raga/actionCreates'
import TodoListUI from './TodoListUi2'
import axios from 'axios'

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.changeInputValue = this.changeInputValue.bind(this)
        this.addItem = this.addItem.bind(this)
        this.delItem = this.delItem.bind(this)
        
        this.storeChange = this.storeChange.bind(this)
        store.subscribe(this.storeChange) // 订阅redux状态
    }

    componentDidMount () {

        // redux-thunk 插件
        // const action = getTodoList()
        // store.dispatch(action)

        // redux-raga 插件
        const action = getMyListAction()
        store.dispatch(action)

        // 放入 redux-thunk插件里面访问服务器
        // axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then((res)=>{
        //     console.log(res)
        //     const data = res.data
        //     const action = getListAction(data)
        //     store.dispatch(action)
        // })
    }

    render() { 
        return ( 
           <TodoListUI 
            list={this.state.list}
            inputValue={this.state.inputValue}
            changeInputValue={this.changeInputValue}
            addItem={this.addItem}
            delItem={this.delItem}
           />
         );
    }

    changeInputValue (e) {
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }

    addItem () {
        const action = addItemAction()
        // const action = { type: ADD_ITEM }
        store.dispatch(action)
    }

    delItem ( index ) {
        console.log(index)
        const action = delItemAction(index)
        // const action = {
        //     type:DEL_ITEM,
        //     index
        // }


        store.dispatch(action)
    }

    storeChange () {
        this.setState(store.getState())
    }
}
 
export default TodoList;